<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<img src="https://item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.5af92a891xi17T&id=730572434256&scm=1007.40986.276750.0&pvid=ace17178-5cb9-4f4b-98af-710bd14e9630" alt="">
		<!-- 
		 
		 
		 封装并且使用 axios
		官网文档    http://www.axios-js.com/
		 第一步 安装  axios
		 cnpm install axios
		
			第二部 在scr目录下面新建一个 utils(这个目录随便你取)目录
			
			第三步  在该目录(utils)下面新建一个 js文件   httprequest(名字随便你取)  
			在里面写入以下 代码
				
				import axios from 'axios'  //引入axios对象
				 
				  //创建一个 axios实例  实例能使用axios的所有方法
				const http = axios.create({
				  baseURL: 'https://some-domain.com/api/',  //服务器基础域名 所有请求都在该域名下面
				  timeout: 60000,   //超时时间  当一个请求 超过设定时间没有拿到结果就直接 报错
				  headers: {'X-Custom-Header': 'foobar'}   //设置请求头的内容 一般不用修改
				});
				// 添加请求拦截器
				http.interceptors.request.use(function (config) {
				    // 在发送请求之前做些什么
				    return config;
				  }, function (error) {
				    // 对请求错误做些什么
				    return Promise.reject(error);
				  });
				
				// 添加响应拦截器
				http.interceptors.response.use(function (response) {
				    // 2xx 范围内的状态码都会触发该函数。
				    // 对响应数据做点什么
				    return response;
				  }, function (error) {
				    // 超出 2xx 范围的状态码都会触发该函数。
				    // 对响应错误做点什么
				    return Promise.reject(error);
				  });
				
				
				
				export default http   //将 定义的http(新的请求实例 暴露出去)
				
				第四步  在 main.js里面 写入以下代码 
				
				import http from '@/utils/httpRequest'  //引入封装好的http
				Vue.prototype.$http=http    //将http 设置为  Vue构造函数的prototype属性上面 这样所有的Vue 组件实例都能通过 this.$http 访问这个属性

				
				第五步 发送请求
				get 请求的用法  
				// 向给定ID的用户发起请求
				this.$http.get('area', {
						params: {
							id:12
						}
					})
					.then(data => {
						console.log(data);
					})
		 
			使用 element    官网   https://element.eleme.cn/#/zh-CN
			  第一步 在项目里面 安装  
						 cnpm i element-ui -S
						 
						 第二部  在main.js 里面  注册
						 import ElementUI from 'element-ui';
						 import 'element-ui/lib/theme-chalk/index.css';
						 Vue.use(ElementUI);
			
			
			同源策略  
						项目的地址(网页打开的地址)  http://localhost:8080/
						接口的地址(请求资源的地址)   http://localhost:3000\
													https://api.i-lynn.cn/
												协议     域名       端口
						协议域名端口必须都是一模一样  才是同源的地址 才允许通信
						三者任意一样不同 那么违反了同源策略   也就是 跨域
						
						跨域详解  https://zhuanlan.zhihu.com/p/274238013
						axios  官网  https://www.axios-http.cn/
						
						vue 解决跨域
						在 vue.config.js 里面  的module.export 里面添加一项 配置 
						devServer: {
							// 跨域
							proxy: {
								// 只要axios请求中带有/api的url,就会触发代理机制
								'/api': {
									// 目标路径：target(我们要代理请求的地址)
									target: 'https://api.i-lynn.cn',
									// 允许跨域
									changOrigin: true,
									// 重写路径 api代替了目标路径
									pathRewrite: {
										'^/api': ''
									}
								}
							},
						}
						
		 -->
	</body>
</html>
